<template>
  <!-- client框架组件 -->
  <ProcessClient
    type="mp4"
    isEye
    isColor
    isDel
    ref="processClient"
    :setColor="cornerstone.setStateColor"
    @toolBarClick="handleToolBarClick"
    @lesionClick="handleLesionClick"
    @getData="getData"
  >
    <template #content>
      <div 
        class="process-content"
      >
        <div class="cornerstone-element" :id="`cornerstone-element`"></div>
        <div class="series-list-container">
          <span class="text">排序</span>
          <div class="series-list">
            <div
              :class="item.isActive ? 'item active' : 'item' "
              v-for="(item, index) in prData.imageIds"
              :key="item.imageId"
              @click="cornerstone.handleClick(index)"
            >
              <img :src="item.imageId" />
            </div>
          </div>
        </div>
      </div>
    </template>
  </ProcessClient>
  
</template>

<script lang="ts" setup>
import ProcessClient from "@/views/processClient/index.vue";
import { reactive, ref, onMounted, watch, watchEffect, nextTick} from "vue";
import * as Store from "@/store";
import useCornerstone from './hooks/useCornerstone';
import _ from 'lodash';

const activeColor = "#008000";
const defaultColor = "#fbb03b";
const prData = Store.useProcessData();

const {
  processClient,
  ...cornerstone
} = useCornerstone({
  element: "#cornerstone-element"
});

function getData(){
  cornerstone.render();
}

//点击工具
function handleToolBarClick(value:any){
  const { currentLesion, currentItem } = value;
  const { toolName } = currentItem;
  if( ["reset"].includes(toolName) ){
    cornerstone.reset();
  } else if ( ["clearLength"].includes(toolName) ) {
    cornerstone.clearLength();
  } else {
    cornerstone.setToolActive(toolName);
    if( currentLesion ){
      prData.setCurrentLesion(_.cloneDeep(currentLesion));
    }
  }
}

//点击病灶
function handleLesionClick(value:any){
  const { type, currentItem } = value;
  const { viewList, lesionData } = currentItem;
  const { toolType, uuid, approveLeisonId, isApproveEye, color, isCurrent } = lesionData || {};
  if( type === 'del' ){
    //删除
    cornerstone.removeToolState(toolType, uuid, approveLeisonId);
    cornerstone.setStateColor(toolType, uuid, defaultColor, defaultColor);
    processClient.value.getLesionSign(false);
  }
  if( type === 'eyes' ){
    //显示或隐藏单个
    cornerstone.toggleToolVisible(toolType, uuid, isApproveEye)
  }
  if( type === 'allEyes' ){
    //显示或隐藏多个
    viewList.forEach((item:any)=>{
      const data = item.lesionData;
      cornerstone.toggleToolVisible(data.toolType, data.uuid, currentItem.isAllVisible)
    })
  }
  if( type === 'lesion' ){
    //点击病灶
    const currentActiveColor = isCurrent ? activeColor : defaultColor;
    cornerstone.setStateColor(toolType, uuid, currentActiveColor, defaultColor);
  }
}

onMounted(()=>{
  const el: any = document.querySelector("#cornerstone-element");
  el.oncontextmenu = (e:any) => {
    cornerstone.setPanActive(true); 
    e.preventDefault();
  }
})

watch(() => prData.index, (val) => {
  if(val) {
    cornerstone.updateImage();
  }
}, {
  immediate: true,
  deep: true
})

</script>


<style lang="less">

.process-content{
  width: 100%;
  height: calc( 100vh - 158px);
  .cornerstone-element{
    width: 100%;
    height: 100%;
  }

  .series-list-container{
		width: 100%;
		height: 51px;
		background: linear-gradient(180deg, #0c1a21 0%, #192c38 100%);
		display: flex;
		align-items: center;
		padding: 0 12px;
		.text{
			color: #fff;
		}
		.series-list{
			display: flex;
			margin-left: 14px;
			align-items: center;
			.item{
				width: 48px;
				height: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 4px;
				border: 1px solid #444242;
				border-radius: 1px;
				cursor: pointer;
				&.active{
					border: 1px solid #67C9D5;
				}
				img{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}

</style>
